<template>
    <div>
    <input type="text" v-focus v-model="text">
    <button v-permission="['system:role:add']" @click="change">11</button>
    <component :is="name"></component>
    <Hello>
        <div >插槽</div>
        <template v-slot:test>
         具名插槽
        </template>
        <template v-slot:name>
        <div>name</div>
        </template>
        <template slot-scope="slotvalue">
          {{ slotvalue }}
        </template>
    </Hello>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text: "11",
            name:'Child'
        };
    },
    components:{
        Hello:()=>import('../components/HelloWorld.vue'),
        Child:()=>import('../components/Child.vue'),
        Child1:()=>import('../components/Child1.vue'),
    },
    methods:{
        change(){
            console.log(11111);
            this.name = 'Child1'
        }
    }
}
</script>

<style lang="scss" scoped>

</style>